import React from 'react';
import {useState} from "react"
// hook 规则 https://zh-hans.reactjs.org/docs/hooks-rules.html#gatsby-focus-wrapper
const App = () => {
  // 规则1. 只在最顶层使用 Hook
  // 规则2 不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。
  // 1. 数字
  let [count,setCount] = useState(1);
  // 2. 字符串
  let [str,setStr] = useState("坏蛋！！");
  // 3. 数组
  let [arr,setArr] = useState([
    {
      id:1,
      name:"小坏蛋"
    },{
      id:2,
      name:"好坏！！"
    }
  ])
  return (
    <div>
      <h1>{count}</h1>
      <h1>{str}</h1>
      {
        arr.map(v=><span key={v.id}>{v.name}</span>)
      }
    </div>
  );
}

export default App;
